<template>
  <div class="wrapper">
    <div style="margin: 200px auto;background-color: #FFF;width: 350px;height: 300px;padding: 20px;border-radius: 10px">
      <div style="margin: 20px 0;text-align: center;font-size: 24px"><b>注册</b></div>
      <el-form :model="user" :rules="rules" ref="userForm">
        <el-form-item prop="username">
          <el-input size="medium" style="margin: 10px 0;" prefix-icon="el-icon-user" v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="medium" type="password" style="margin: 10px 0;" prefix-icon="el-icon-lock" v-model="user.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="margin: 10px 0;text-align: center">
          <el-button type="primary" @click="register">注册</el-button>
          <el-button type="warning" @click="$router.push('/login')">返回登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Register",
  data() {
    return {
      user: {},
      rules: {}
    }
  },
  methods: {
    register() {
      axios.post("http://localhost:9090/user/register",this.user).then(res => {
        console.log(res)
        if (res.data.code === "200") {
          this.$message.success(res.data.msg);
          this.$router.push("/login")
        } else if (res.data.code === "400") {
          this.$message.error(res.data.msg);
        }else if (res.data.code === "600") {
          this.$message.error(res.data.msg);
        }
      })
    }
  }

}
</script>

<style scoped>
.wrapper{
  height: 100vh;
  background-image: linear-gradient(to bottom right,red,blue);
  overflow: hidden;
}
</style>